<template>
  <BackGround />
  <div class="container">
    <div style="text-align:right">添加共享相册<el-icon color="yellow">
        <Warning />
      </el-icon>
    </div>
    <div class="album-info">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-descriptions title="共享相册信息" :column="1" direction="vertical">
          <el-descriptions-item label="相册名称">{{album.name}}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{album.createTime}}</el-descriptions-item>
          <el-descriptions-item label="拥有者" :span="2">{{album.userId}}</el-descriptions-item>
          <el-descriptions-item label="备注">{{album.remark}}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

    </div>
    <el-row :gutter="0">
      <el-col :span="8" :offset="0"></el-col>
      <el-col :span="8" :offset="0">
        <el-input type="text" v-model="code" placeholder="密码" size="large" maxlength="4" />
      </el-col>
      <el-col :span="8" :offset="0">
      </el-col>
    </el-row>
    <el-row :gutter="0">
      <el-col :span="8" :offset="0"></el-col>
      <el-col :span="8" :offset="0" style="text-align:center">
        <el-button class="button" size="large" circle type="primary" @click="addShareUser">添加
        </el-button>
      </el-col>
      <el-col :span="8" :offset="0"></el-col>
    </el-row>
  </div>
</template>

<script>
import { dateFormat } from "../../utils/index";
import { ElMessage } from 'element-plus';
export default {
  name: "GAddShareUser",
  data () {
    return {
      code: "",
      albumId: null,
      album: {},
    }
  },
  mounted () {
    this.albumId = this.$route.params.albumId;
    this.getAlbumInfo();
  },
  methods: {
    getAlbumInfo () {
      this.$axios.get("/album/" + this.albumId).then((res) => {
        if (res.flag) {
          this.album = res.data;
          this.album.createTime = dateFormat(this.album.createTime, 3);
        }
      })
    },
    //添加相册使用者
    addShareUser () {
      let that = this;
      this.$axios({
        method: "post",
        url: "/album/share/addshare",
        data: {
          "albumId": that.albumId,
          "code": that.code
        }
      }).then((res) => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 1000,
          })
          this.$router.push("/photoshare/" + this.albumId);
        }
      })
    }
  },
}
</script>

<style scoped>
.button {
  width: 70px;
  height: 70px;
}
.container {
  padding: 20px;
}
.album-info {
  margin: 20px auto;
  width: 80%;
  margin-top: 20%;
}
.el-row {
  margin-top: 10px;
}
</style>